<template>
	<view>
		<u-cell-group>
			<u-cell-item title="收货人" :arrow="false"><input v-model="dataForm.name" class="text_input" type="text" placeholder="请填写收货人姓名" /></u-cell-item>
			<u-cell-item title="手机号" :arrow="false"><input v-model="dataForm.mobile" class="text_input" type="number" placeholder="请填写收货人手机号" /></u-cell-item>
			<u-cell-item title="所在地区" @click="goSelect">
				<view class="text_input">{{ dataForm.area?areaFilter(dataForm.area):'请选择所在地区' }}</view>
			</u-cell-item>
			<u-cell-item title="详细地址" :arrow="false"><input v-model="dataForm.address" class="text_input" placeholder="街道、楼牌号等" /></u-cell-item>
		</u-cell-group>

		<view class="fix_bot_main">
			<view class="fixed_bottom_btn"><view class="word" :style="{ background: vuex_config.themeColor1 }" @click="save()">保存</view></view>
		</view>
		<address-select v-model="showVisible" :areaCode="areaCode" @submit="selectArea"></address-select>
	</view>
</template>

<script>
import addressSelect from './components/addressSelect.vue';
import { isMobile } from '@/utils/validate.js';
export default {
	components: {
		'address-select': addressSelect
	},
	data() {
		return {
			areaCode: '',
			dataForm: {
				name: '',
				mobile: '',
				area: '',
				address: ''
			},
			showVisible: false
		};
	},
	onLoad(options) {
		if (options && options.item) {
			this.dataForm = {
				...this.dataForm,
				...JSON.parse(options.item)
			};
			this.areaCode = JSON.parse(options.item).area.split(',')[3]
		}
	},
	computed: {
		areaFilter(area) {
			return area => {
				let arr = area.split(',');
				let len = arr.length;
				arr.splice(len - 1, 1);
				return arr.join('');
			};
		}
	},
	methods: {
		// 打开区域选择弹窗
		goSelect() {
			this.showVisible = true;
		},
		selectArea(areaname) {
			this.dataForm.area = areaname;
		},
		save() {
			let that = this;
			let dataForm = this.dataForm;
			console.log('dataForm',dataForm)
			if (!dataForm.name) {
				this.$toast('请填写收货人姓名');
				return;
			}
			if (!dataForm.mobile) {
				this.$toast('请填写收货人手机号');
				return;
			} else if (!isMobile(dataForm.mobile)) {
				this.$toast('请输入正确手机号');
				return;
			}
			if (!dataForm.area) {
				this.$toast('请选择收货地区');
				return;
			}
			if (!dataForm.address) {
				this.$toast('请填写详细地址');
				return;
			}
			this.$loading(0);
			this.$resPost('AddUsersOrderAddress', dataForm).then(() => {
				this.$hide();
				this.$toast('保存成功');
				setTimeout(() => {
					this.uniBack();
				}, 800);
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style scoped lang="scss">
.text_input {
	padding-left: 16rpx;
	font-size: 28rpx;
}
</style>
